<template>
  <div class="dashboard-container">
    <div
      class="block"
      style="width: 100%; transform: translate(1191px); margin-bottom: 15px"
    >
      <span class="demonstration" style="margin-right: 10px">请选择日期:</span>
      <el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
    </div>
    <el-row :gutter="20">
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-card class="box-card" style="height: 290px">
            <div class="box_flex">
              <div><h4>环境质量</h4></div>
              <div class="box_echarts">echarts</div>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-card class="box-card" style="height: 290px">
            <div class="box_flex">
              <div><h4>类型统计</h4></div>
              <div class="box_echarts LXTJ">
                <LXTJecharts ref="LXTJecharts" />
              </div></div
          ></el-card></div
      ></el-col>
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-card class="box-card" style="height: 290px">
            <div class="box_flex">
              <div><h4>工单详情</h4></div>
              <div class="box_echarts box_gdxq">
                <el-row :gutter="20">
                  <el-col :span="12"
                    ><div class="grid-content bg-purple">
                      <div class="box_content_center" style="">
                        <div style="margin-bottom: 8px; font-size: 30px">
                          100
                        </div>
                        <div>工单总数</div>
                      </div>
                    </div></el-col
                  >
                  <el-col :span="12"
                    ><div class="grid-content bg-purple">
                      <div class="box_content_center" style="">
                        <div style="margin-bottom: 8px; font-size: 30px">
                          100
                        </div>
                        <div>工单处理中</div>
                      </div>
                    </div></el-col
                  >
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12"
                    ><div class="grid-content bg-purple">
                      <div class="box_content_center" style="">
                        <div style="margin-bottom: 8px; font-size: 30px">
                          100
                        </div>
                        <div>工单审核中</div>
                      </div>
                    </div></el-col
                  >
                  <el-col :span="12"
                    ><div class="grid-content bg-purple">
                      <div class="box_content_center" style="">
                        <div style="margin-bottom: 8px; font-size: 30px">
                          100
                        </div>
                        <div>逾期工单</div>
                      </div>
                    </div></el-col
                  >
                </el-row>
              </div>
            </div></el-card
          >
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-card class="box-card" style="height: 290px">
            <div class="box_flex">
              <div><h4>工单检测</h4></div>
              <div class="box_echarts GDJC">
                <GDJCecharts ref="GDJCecharts" />
              </div></div
          ></el-card></div
      ></el-col>
    </el-row>
    <div style="margin-top: 15px"></div>
    <el-row :gutter="20">
      <el-col :span="12"
        ><div class="grid-content bg-purple">
          <el-card class="box-card" style="height: 660px">
            <!-- 日期 -->
            <el-calendar v-model="value"> </el-calendar>
          </el-card></div
      ></el-col>
      <el-col :span="12"
        ><div class="grid-content bg-purple">
          <el-row>
            <el-col :span="24"
              ><div class="grid-content bg-purple-dark">
                <el-row>
                  <el-col :span="24"
                    ><div class="grid-content bg-purple-dark">
                      <el-card class="box-card" style="height: 322px">
                        <div class="box_flex">
                          <div><h4>环境质量</h4></div>
                          <div
                            class="box_echarts GDMYTJTop"
                            style="height: 260px"
                          >
                            <GDMYTJechartsTop ref="GDMYTJechartsTop" />
                          </div>
                        </div>
                      </el-card></div
                  ></el-col>
                </el-row>
                <div style="margin-top: 15px"></div>

                <el-row>
                  <el-col :span="24"
                    ><div class="grid-content bg-purple-dark">
                      <el-card class="box-card" style="height: 322px">
                        <div class="box_flex">
                          <div><h4>环境质量</h4></div>
                          <div
                            class="box_echarts GDMYTJBottom"
                            style="height: 260px"
                          >
                            <GDMYTJBottom ref="GDMYTJBottom" />
                          </div>
                        </div>
                      </el-card></div
                  ></el-col>
                </el-row>
                </div
            ></el-col>
          </el-row></div
      ></el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import LXTJecharts from "./component/LXTJecharts.vue";
import GDMYTJechartsTop from "@/views/home/component/GDMYTJechartsTop";
import GDMYTJBottom from "@/views/home/component/GDMYTJBottom";
import GDJCecharts from "@/views/home/component/GDJCecharts";

export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["name"]),
  },
  components: {
    LXTJecharts,
    GDMYTJechartsTop,
    GDMYTJBottom,
    GDJCecharts,
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",
      value2: "",
      value: new Date(),
    };
  },
  methods: {},
  mounted() {
    // 类型统计
    var LXTJecharts = document.querySelector(".LXTJ");
    // 工单每月统计折线图
    var GDMYTJechartsTop = document.querySelector(".GDMYTJTop");
    // 工单每月统计柱状图
    var GDMYTJechartsBottom = document.querySelector(".GDMYTJBottom");
    // 工单检测
    var GDJCecharts = document.querySelector(".GDJC");

    this.$refs.LXTJecharts.echartInit(LXTJecharts);
    this.$refs.GDMYTJechartsTop.echartInit(GDMYTJechartsTop);
    this.$refs.GDMYTJBottom.echartInit(GDMYTJechartsBottom);
    this.$refs.GDJCecharts.echartInit(GDJCecharts);
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
::v-deep.dashboard-container {
  margin: 15px 30px 30px 30px;
}
::v-deep .el-card__body {
  padding: 10px;
}
.box_flex {
  display: flex;
  flex-direction: column;
  h4 {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .box_echarts {
    height: 224px;
    width: 100%;
  }
}
.box_gdxq .grid-content {
  height: 90px;
  margin-top: 13px;
  text-align: center;
}
.box_gdxq .box_content_center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
